<template>
	<view>
		<pageHeader  @back='back' :fixed='true' :border='true'>
			<text>商家入驻协议</text>
			<text @tap="toApply" class="toApply" slot="right" v-if="isNeed">我要申请</text>
		</pageHeader>
		<view style="height:16rpx;background-color:#F5F5F5;"></view>
		<uni-load-more status="loading"  v-if="showLoading" />
		<view class="page_title" v-if="!showLoading">
			<text>《物连家美网络服务商家入驻协议》</text>
		</view>
		<view class="body" v-if="!showLoading">
			<rich-text :nodes="newMessage" v-if="message"></rich-text>
			<!-- <view>{{message.head}}</view>
			<view class="one" v-for="(item,index) in message.body" :key='index'>
				<view class="one_title">{{item.firstOrder}} {{item.firstTitle}}</view>
				<view class="one-desc" v-if="item.firstContent">{{item.firstContent}} </view>
				<view class="two"  v-for='(item1,index1) in item.firstChild' :key='index1' :class="{noMargin:index1==0}">
					<view class="two_title">{{item1.secondOrder}}</view>
					<view class="two_body">{{item1.secondContent}}</view>
					<template v-if="item1.secondChild">
						<view class="three" v-for="(item2,index2) in item1.secondChild" :key='index2'>
							<view class="three_title">{{item2.thirdOrder}}</view>
							<view class="three_body">{{item2.thirdContent}}</view>
						</view>
					</template>
				</view>
			</view>
			<view class="theEnd">{{message.foot}}</view> -->
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import url from '@/common/util/personal.js'
	import pageHeader from "@/components/header/header.vue"
	export default {
		components: {pageHeader,uniLoadMore},
		data() {
			return {
				isNeed:false,
				message:"",
				showLoading:true
			};
		},
		onLoad(e) {
			this.getMessage()
			if(e.isNeed){
				this.isNeed=true
			}
		},
		computed:{
			newMessage(){
				let height=uni.getSystemInfoSync().windowWidth*48/750
				return this.message.replace(/<br \/>/g,('<div style="height:'+height+'px"></div>'))
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			async getMessage(){
				let res=await url.getMerchantCooperationProtocol()
				this.message=res.data
				this.showLoading=false
			},
			toApply(){
				uni.redirectTo({
					url: '/pages/personal/storeApply'
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	line-height: 48rpx;
	font-size: 30rpx;
	color:#333333 ;
	letter-spacing: 1rpx;
}
.page_title{
	height:114rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1rpx solid #EEEEEE;
	text{
		font-size: 34rpx;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #333333;
		font-weight: bold;
	}
}
.body{
	padding: 0rpx 30rpx 49rpx;
	text-align: justify;
	rich-text{
		/deep/ p,/deep/ h1 ,/deep/ h2,/deep/ h3,/deep/ h4,/deep/ h5,/deep/ h6{
			font-size: 30rpx !important;
			line-height: 48rpx !important;
		}
		/deep/ h1 ,/deep/ h2,/deep/ h3,/deep/ h4,/deep/ h5,/deep/ h6{
			font-weight: bold !important;
		}
		/deep/ p{
			margin:48rpx 0;
		}
	}
	// .one{
	// 	margin-top: 48rpx;
	// 	.one_title{
	// 		font-weight: bold;
	// 	}
	// 	.one-desc{
	// 		margin-bottom: 48rpx;
	// 	}
	// 	.two{
	// 		margin-top: 48rpx;
	// 		position: relative;
	// 		.two_title{
	// 			left: 0;
	// 			top: 0;
	// 			position: absolute;
	// 			font-weight:bold ;
	// 		}
	// 		.two_body{
	// 			text-indent:2em;
	// 		}
	// 	}
	// 	.three{
	// 		margin-top: 48rpx;
	// 		position: relative;
	// 		.three_title{
	// 			left: 0;
	// 			top: 0;
	// 			position: absolute;
	// 			font-weight:bold ;
	// 		}
	// 		.three_body{
	// 			text-indent:3em;
	// 		}
	// 	}
	// }
	// .theEnd{
	// 	font-weight: bold;
	// 	margin-top: 48rpx;
	// }
}
// .noMargin{
// 	margin-top: 0!important;
// }
.toApply{
	font-size: 34rpx;
	color:#333333 ;
	line-height: 34rpx;
	letter-spacing: 1rpx;
	margin-right: 30rpx;
}
</style>
